<template>
    <div v-for="(item, index) in timeData" :key="index" :class="{ 'active': activeTime === index }"
        @click="activeTimeHandler(item,index)" class="search-list">
        <p>
            {{ item.time }}
        </p>
    </div>
</template>
<script setup>
import { ref, defineEmits,defineProps } from "vue";
let emit = defineEmits(['options'])
let props = defineProps(['timeData','activeTime'])

const activeTimeHandler = (v,i) => {
    emit('options',v,i)
}
</script>
<style scoped lang='scss'>
.search-list {
    box-sizing: border-box;
    width: 33%;
    padding: 5px;
    cursor: pointer;

    p {
        padding: 3px;
    }
}

.active {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to left, #01C9FF, #01C9FF) left top no-repeat,
        linear-gradient(to bottom, #01C9FF, #01C9FF) left top no-repeat,
        linear-gradient(to left, #01C9FF, #01C9FF) right top no-repeat,
        linear-gradient(to bottom, #01C9FF, #01C9FF) right top no-repeat,
        linear-gradient(to left, #01C9FF, #01C9FF) left bottom no-repeat,
        linear-gradient(to bottom, #01C9FF, #01C9FF) left bottom no-repeat,
        linear-gradient(to left, #01C9FF, #01C9FF) right bottom no-repeat,
        linear-gradient(to left, #01C9FF, #01C9FF) right bottom no-repeat;
    background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
    color: #fff;

    p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        border: 1px solid #0290FF;
        background-color: rgba(20, 59, 111, .5);
        border-radius: 4px;
    }
}
</style>
